<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link  th:href="@{/ajax/libs/summernote/summernote.css}" rel="stylesheet">
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-product-edit" th:object="${product}">
            <input id="id" name="id" th:field="*{id}"  type="hidden">
			<div class="form-group">	
				<label class="col-sm-3 control-label">商品标题：</label>
				<div class="col-sm-8">
					<input id="title" name="title" th:field="*{title}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">现价：</label>
				<div class="col-sm-8">
					<input id="newprice" name="newprice" th:field="*{newprice}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">原价：</label>
				<div class="col-sm-8">
					<input id="oldprice" name="oldprice" th:field="*{oldprice}" class="form-control" type="text">
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">商品分类：</label>
				<div class="col-sm-9">
					<select class="form-control" name="cid" >
						<option th:selected="${product.cid==c.id}"  th:each="c:${categoryList}" th:value="${c.id}" th:text="${c.name}"></option>
					</select>
				</div>
			</div>

			<div class="form-group">	
				<label class="col-sm-3 control-label">商品logo：</label>
				<div class="col-sm-8">
				<div class="col-sm-8">
					<div class="layui-upload">
					  <button type="button" class="layui-btn" id="test1">上传图片</button>
						  <div class="layui-upload-list">
						    <img class="layui-upload-img" id="demo1" style="max-width: 217px;" >
							<input id="img" name="img" th:field="*{img}" class="form-control" type="hidden">
						    <p id="demoText"></p>
						  </div>
					</div> 
				</div>
				</div>
			</div>
			
		   <div class="form-group">	
				<label class="col-sm-3 control-label">详情：</label>
				<div class="col-sm-8">
					<div id="summernote"></div>
				<input id="details" name="details" class="form-control" type="hidden"  th:field="*{details}">
				</div>
			</div>
		</form>
    </div>
    <div th:include="include::footer"></div>
    <script th:src="@{/ajax/libs/summernote/summernote.min.js}"></script>
    <script th:src="@{/ajax/libs/summernote/summernote-zh-CN.min.js}"></script>
    <script type="text/javascript">
	//富文本编辑器初始化
	$('#summernote').summernote({
		height: 400,                 
		minHeight: 400,             
		maxHeight: 400,             
		focus: true,                 
		lang:'zh-CN',
        callbacks:{
        	onImageUpload:function(files){
        		sendFile(files);
        	}
        }

	});
	

	var details=$("#details").val();
	$("#summernote").summernote("code",details);
	
	var img=$("#img").val();
    var imgpath ="/profile/upload/"+img;
    $("#demo1").attr("src",imgpath);
    
    
	//选择图片时把图片上传到服务器再读取服务器指定的存储位置显示在富文本区域内
    function sendFile(files, editor, $editable) {  
        var formdata = new FormData();  
        formdata.append("file", $('.note-image-input')[0].files[0]);  
        
        $.ajax({  
            data : formdata,  
            type : "POST",  
            url : "/common/upload", //图片上传出来的url，返回的是图片上传后的路径，http格式  
            cache : false,  
            contentType : false,  
            processData : false,  
            dataType : "json",  
            success: function(data) {
            	console.log(data);
                //data是返回的hash,key之类的值，key是定义的文件名  
                $('#summernote').summernote('insertImage', data.url);  
            },  
            error:function(){  
                alert("上传失败");  
            }  
        });  
    }
	
	
    
    layui.use('upload', function(){
   	 var $ = layui.jquery ,upload = layui.upload;
   	 
   	 //普通图片上传
   	  var uploadInst = upload.render({
   	    elem: '#test1'
   	    ,url: '/common/upload'
   	    ,before: function(obj){
   	      //预读本地文件示例，不支持ie8
   	      obj.preview(function(index, file, result){
   	        $('#demo1').attr('src', result); //图片链接（base64）
   	      });
   	    }
   	    ,done: function(res){
   	      //如果上传失败
   	      if(res.code > 0){
   	        return layer.msg('上传失败');
   	      }
   	      //上传成功
   	      console.log(res);
   	      var fileName=res.fileName;
   	      $("#img").val(fileName);
   	      
   	    }
   	    ,error: function(){
   	      //演示失败状态，并实现重传
   	      var demoText = $('#demoText');
   	      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
   	      demoText.find('.demo-reload').on('click', function(){
   	        uploadInst.upload();
   	      });
   	    }
   	  });
   	
   });
    
    
		var prefix = ctx + "system/product";
		$("#form-product-edit").validate({
			rules:{
				xxxx:{
					required:true,
				},
			}
		});
		
		function submitHandler() {
			 var details=$("#summernote").summernote("code");
			 $("#details").val(details);
	        if ($.validate.form()) {
	            $.operate.save(prefix + "/edit", $('#form-product-edit').serialize());
	        }
	    }
	</script>
</body>
</html>
